// 公共组件JS文件

// 动态加载iOS风格状态栏
function loadStatusBar() {
  const statusBars = document.querySelectorAll('.ios-status-bar');
  
  statusBars.forEach(statusBar => {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const timeElement = statusBar.querySelector('.status-time');
    
    if (timeElement) {
      timeElement.textContent = `${hours}:${minutes}`;
    }
    
    // 更新电池和信号图标可以在此添加
  });
}

// 底部Tab Bar导航激活状态
function setupTabBar() {
  const tabItems = document.querySelectorAll('.tab-item');
  
  // 根据当前页面URL设置激活状态
  const currentPage = window.location.pathname.split('/').pop();
  
  tabItems.forEach(tab => {
    const tabLink = tab.getAttribute('data-page');
    
    if (currentPage === tabLink) {
      tab.classList.add('active-tab');
      const tabIcon = tab.querySelector('.tab-icon');
      const tabText = tab.querySelector('.tab-text');
      
      if (tabIcon) tabIcon.classList.add('text-indigo-600');
      if (tabText) tabText.classList.add('text-indigo-600', 'font-medium');
    }
    
    // 添加点击事件
    tab.addEventListener('click', function() {
      const targetPage = this.getAttribute('data-page');
      if (targetPage && targetPage !== currentPage) {
        // 添加简单的过渡动画
        document.body.classList.add('page-transition');
        setTimeout(() => {
          window.location.href = targetPage;
        }, 200);
      }
    });
  });
}

// 模拟点击波纹效果
function setupRippleEffect() {
  const buttons = document.querySelectorAll('button, .btn, .clickable');
  
  buttons.forEach(button => {
    button.addEventListener('click', function(e) {
      const ripple = document.createElement('span');
      const rect = this.getBoundingClientRect();
      
      // 修复圆形按钮中的涟漪效果位置计算
      const isRounded = this.classList.contains('rounded-full') ||
                      getComputedStyle(this).borderRadius.includes('%') ||
                      getComputedStyle(this).borderRadius === getComputedStyle(this).width;
      
      if (isRounded) {
        // 对于圆形按钮，将涟漪效果放在中心位置
        const diameter = Math.max(rect.width, rect.height);
        ripple.style.width = ripple.style.height = `${diameter * 2}px`;
        ripple.style.left = `${-diameter / 2}px`;
        ripple.style.top = `${-diameter / 2}px`;
        ripple.style.transformOrigin = 'center';
      } else {
        // 对于非圆形按钮，保持原始计算方法
        const size = Math.max(rect.width, rect.height);
        const x = e.clientX - rect.left - size / 2;
        const y = e.clientY - rect.top - size / 2;
        
        ripple.style.width = ripple.style.height = `${size}px`;
        ripple.style.left = `${x}px`;
        ripple.style.top = `${y}px`;
      }
      
      ripple.classList.add('ripple');
      
      // 确保按钮有一个相对定位，以便涟漪能正确显示
      if (getComputedStyle(this).position === 'static') {
        this.style.position = 'relative';
      }
      
      // 确保溢出隐藏，让涟漪效果在按钮内部显示
      this.style.overflow = 'hidden';
      
      this.appendChild(ripple);
      
      setTimeout(() => {
        ripple.remove();
      }, 600);
    });
  });
}

// 初始化无障碍支持
function setupAccessibility() {
  // 为可点击元素添加适当的角色和标签
  const clickableElements = document.querySelectorAll('button, .btn, .clickable, a');
  
  clickableElements.forEach(element => {
    if (!element.getAttribute('role')) {
      element.setAttribute('role', 'button');
    }
    
    if (!element.getAttribute('tabindex')) {
      element.setAttribute('tabindex', '0');
    }
    
    // 键盘导航支持
    if (!element.hasAttribute('aria-label') && element.textContent.trim()) {
      element.setAttribute('aria-label', element.textContent.trim());
    }
    
    // 添加键盘事件处理
    element.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        element.click();
      }
    });
  });
}

// 页面转场动画
function setupPageTransitions() {
  // 添加页面转场的CSS
  const style = document.createElement('style');
  style.textContent = `
    .page-transition {
      opacity: 0.8;
      transform: scale(0.95);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .page-enter {
      animation: pageEnter 0.3s ease forwards;
    }
    @keyframes pageEnter {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .ripple {
      position: absolute;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.15);
      transform: scale(0);
      animation: ripple 0.6s linear;
      pointer-events: none;
    }
    @keyframes ripple {
      to {
        transform: scale(2);
        opacity: 0;
      }
    }
  `;
  document.head.appendChild(style);
  
  // 页面加载时添加进入动画
  document.body.classList.add('page-enter');
}

// 初始化所有组件
function initComponents() {
  loadStatusBar();
  setupTabBar();
  setupRippleEffect();
  setupAccessibility();
  setupPageTransitions();
  
  // 每分钟更新一次时间
  setInterval(loadStatusBar, 60000);
}

// 当DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', initComponents); 
